<template>
  <div class="container">
    <!-- 左侧美化区域 -->
    <div class="left-panel">
      <div class="welcome-content">
        <h1>欢迎来到管理系统</h1>
        <p>高效 · 安全 · 智能</p>
        <div class="decor-circle decor1"></div>
        <div class="decor-circle decor2"></div>
      </div>
    </div>
    <!-- 右侧登录框 -->
    <div class="login-form">
      <div class="form-container">
        <h1>后台管理</h1>
        <el-form ref="form" :model="postData" label-width="0">
          <el-form-item>
            <el-input
              v-model="postData.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="postData.user_password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleLogin"
              class="login-btn"
              style="width: 100%;"
            >登录</el-button>
          </el-form-item>
        </el-form>
        <div class="student-entry">
          <router-link to="/reg" class="register-link">
            注册新账户
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { validateUser } from "@/api";
import { ElMessage } from 'element-plus';

const router = useRouter();
const store = useStore();

const postData = ref({
  username: "",
  user_password: "",
});
//模拟响应对象
     let res = {
        code:200,
        msg:"登录成功",
        data:{
          user:{
            username:"admin",
            user_role:'admin'
          },
          token:"测试token字符串"
        }
      }


const handleLogin = async () => {
  try {
    const response = res
    // const response = await validateUser(postData.value);
    if (response.code === 200) {
      // 登录成功
      ElMessage({
        message: response.msg,
        type: "success",
      });
      store.commit("loginToken", response.data.token);
      store.commit('login', JSON.stringify(response.data.user));
      router.push("./"); // 假设你有一个命名路由 'Home'
    } else {
      // 登录失败
      ElMessage.error(response.msg);
    }
  } catch (error) {
    // 处理请求错误
    ElMessage.error('登录请求失败'+error);
  }
};

const goRegView = () => {
  router.push("./reg"); // 假设你有一个命名路由 'Register'
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f8f9fa;

  .left-panel {
    flex: 1 1 50%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6a82fb 0%, #fc5c7d 100%);
    position: relative;
    min-width: 350px;

    .welcome-content {
      color: #fff;
      text-align: center;
      z-index: 2;
      position: relative;

      h1 {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 1rem;
        letter-spacing: 2px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.15);
      }
      p {
        font-size: 1.2rem;
        opacity: 0.9;
        margin-bottom: 2rem;
      }
    }

    .decor-circle {
      position: absolute;
      border-radius: 50%;
      opacity: 0.18;
      z-index: 1;
    }
    .decor1 {
      width: 180px;
      height: 180px;
      left: 10%;
      top: 20%;
      background: #fff;
      filter: blur(2px);
    }
    .decor2 {
      width: 120px;
      height: 120px;
      right: 12%;
      bottom: 18%;
      background: #fff;
      filter: blur(1px);
    }
  }

  .login-form {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);

    .form-container {
      width: 400px;
      padding: 45px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .form-container:hover {
      transform: translateY(-5px);
    }

    .form-container h1 {
      text-align: center;
      margin-bottom: 40px;
      color: #2c3e50;
      font-weight: 600;
    }

    .login-btn {
      width: 100%;
      min-width: 220px;
      max-width: 320px;
      height: 48px;
      font-size: 17px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
      margin-bottom: 0;
    }

    :deep(.el-input) {
      margin-bottom: 24px;
      width: 100%;
      min-width: 220px;
      max-width: 320px;
    }

    :deep(.el-input__inner) {
      height: 48px;
      border-radius: 8px;
      font-size: 17px;
    }

    .student-entry {
      text-align: center;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #eee;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .student-link {
      color: #409EFF;
      text-decoration: none;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .student-link:hover {
      color: #66b1ff;
      text-decoration: underline;
    }

    .register-link {
      color: #67c23a;
      text-decoration: none;
      font-size: 14px;
      transition: all 0.3s;
    }
    .register-link:hover {
      color: #95d475;
      text-decoration: underline;
    }
  }

  @media (max-width: 900px) {
    flex-direction: column;
    .left-panel {
      min-height: 180px;
      height: 220px;
      min-width: unset;
      border-radius: 0 0 32px 32px;
    }
    .login-form {
      margin: 30px 0;
    }
  }
}
</style>